import { h, computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'SvgIcon2',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const iconName = computed(() => `#icon-${props.iconClass}`)
    const svgClass = computed(() => {
      return props.className ? `svg-icon ${props.className}` : 'svg-icon'
    })

    return () => (
      h('svg', { class: svgClass.value, 'aria-hidden': 'true' }, [
        h('use', { 'xlink:href': iconName.value, fill: props.color })
      ])
    )
  }
})